{include file="./public/header" title="信息概览"/}
<link rel="stylesheet" type="text/css" href="__STATIC__/lib/datatables/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/lib/datatables-buttons/css/buttons.dataTables.min.css"/>
<body class="hold-transition skin-blue fixed sidebar-mini">
<div class="wrapper">

    {include file="./public/navi"/}

    <!--页面主体-->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 系统后台</a></li>
                <li class="active">信息概览</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="fa fa-credit-card"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">昨日售卡数</span>
                            <span class="info-box-number">{$count['yc']}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-red"><i class="fa fa-file-text"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">昨日订单数</span>
                            <span class="info-box-number">{$count['yo']}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->

                <!-- fix for small devices only -->
                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="fa fa-credit-card"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">总售卡数</span>
                            <span class="info-box-number">{$count['c']}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-yellow"><i class="fa fa-file-text"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">总订单数</span>
                            <span class="info-box-number">{$count['o']}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12 hidden-xs">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <div class="box-title">
                                <i class="fa fa-line-chart"></i>&nbsp;整体数据趋势
                            </div>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="box-body">
                            <div id="c2"></div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-8 -->

                <div class="col-lg-6">
                    <!-- /.panel -->
                    <div class="box box-success">
                        <div class="box-header with-border">
                            <div class="box-title">
                                <i class="fa fa-list"></i>&nbsp;统计数据
                            </div>
                            <span id="date"></span>
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-toggle="dropdown"><i
                                        class="fa fa-chevron-down"></i>
                                </button>
                                <ul class="dropdown-menu slidedown">
                                    <li><a onclick="table('')">所有数据</a></li>
                                    {volist name="date" key="key" id="vo"}
                                    <li><a onclick="table('{$vo}')">{$vo}</a></li>
                                    {/volist}
                                </ul>
                            </div>
                        </div>
                        <!-- /.panel-heading -->
                        <table id="count" cellspacing="0" width="100%"
                               class="table table-striped table-hover table-condensed">

                        </table>
                    </div>
                    <!-- /.panel .chat-panel -->
                </div>
                <!-- /.col-lg-6 -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

{include file="public/js"/}
<!-- 阿里G2图表 -->
<script src="https://a.alipayobjects.com/g/datavis/g2/2.3.4/index.js"></script>
<script src="__STATIC__/lib/datatables/js/jquery.dataTables.min.js"></script>
<script src="__STATIC__/lib/datatables/js/dataTables.bootstrap.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/jszip.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/buttons.print.min.js"></script>

<script>
    //趋势图
    $.getJSON("{:url('admin/chart/chartLine')}", function (newData) {
        chart.changeData(newData);
    });
    var data = [];
    var chart = new G2.Chart({
        id: 'c2',
        forceFit: true,
        height: 300
    });
    chart.setMode('select'); // 开启框选模式
    chart.select('rangeX'); // 设置 X 轴范围的框选
    chart.source(data, {
        date: {
            alias: '日期',
            mask: 'mm.dd'
        },
        value: {
            type: 'linear',
            min: 0,
            max: 150,
            tickInterval: 15,
            alias: '数量'
        },
        kind: {
            alias: '类型'
        }
    });
    chart.axis('date', {
        tickLine: {
            lineWidth: 2,
            value: 10,
            stroke: 'red'
        }
    });
    chart.line().position('date*value').color('kind').shape('spline').size(3);
    chart.render();
    // 监听双击事件，这里用于复原图表
    chart.on('plotdblclick', function (ev) {
        chart.get('options').filters = {}; // 清空 filters
        chart.repaint();
    });

    // 关闭 G2 的体验改进计划打点请求
    G2.track(false)

    //数据表
    $(document).ready(function () {
        $('#count').DataTable({
            "ajax": {
                "url": "{:url('admin/chart/count')}?date=",
                "dataSrc": ""
            },
            "columns": [
                {"data": "品牌", "title": "品牌", "sClass": "text-center"},
                {"data": "售卡数", "title": "售卡", "sClass": "text-center"},
                {"data": "订单数", "title": "订单", "sClass": "text-center"},
                {"data": "带单数", "title": "带单", "sClass": "text-center"}
            ],

            dom: 't',
            "paging": false,

            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "search": "搜索:",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                }
            }
        });

    });

    function table(date) {
        $('#count').DataTable({
            "ajax": {
                "url": "{:url('admin/chart/count')}?date=" + date,
                "dataSrc": ""
            },
            "destroy": true,
            "columns": [
                {"data": "品牌", "title": "品牌", "sClass": "text-center"},
                {"data": "售卡数", "title": "售卡", "sClass": "text-center"},
                {"data": "订单数", "title": "订单", "sClass": "text-center"},
                {"data": "带单数", "title": "带单", "sClass": "text-center"}
            ],

            dom: 't',
            "paging": false,

            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "search": "搜索:",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                }
            }
        });

        $("#date").text(date);
    }
</script>
</body>

</html>